<template>
  <div class="home">
    <el-container>
      <el-header style="height: 50px;background-color: #C0C0C0">
        <div style="margin: 0 auto;">
          <el-row :gutter="10">
            <el-col :span="1">
              <i class="el-icon-menu" style="font-size: 30px;margin-top: 10px"></i>
            </el-col>
            <el-col :span="1">
              <div style="margin: 5px 0">
                <img src="../../public/logo.png" width="50">
              </div>
            </el-col>
            <el-col :span="2">
              <div style="height: 50px;">
                <span style="font-size:20px;line-height:50px"><b>解忧</b></span>
              </div>
            </el-col>
            <el-col :span="6">
              <el-input style="position:relative; top:5px"
                        v-model="wd"
                        placeholder="请输入关键字">
                <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
              </el-input>
            </el-col>
            <div v-show="false">
              <el-col :span="9">
                <p></p>
              </el-col>
              <el-col :span="2">
                <p>下载APP</p>
              </el-col>
              <el-col :span="3">
                <div
                    style="border: 1px solid white;margin: 8px 10px;border-radius: 20px;text-align: center;background-color: orange">
                  <p style="margin: 5px auto">登录/注册</p>
                </div>
              </el-col>
            </div>
            <div v-show="true">
              <el-col :span="5">
                <p></p>
              </el-col>
              <el-col :span="2">
                <p>下载APP</p>
              </el-col>
              <el-col :span="2">
                <div style="border: 1px solid white;margin: 10px;border-radius: 20px;padding: 3px 5px;">
                  <div>
                    <img src="../../public/q1.png" style="width: 20px;float: left">
                  </div>
                  <span style="margin: 0 5px;">0</span>
                  <i class="el-icon-circle-plus"></i>
                </div>

              </el-col>
              <el-col :span="2">
                <div style="border: 1px solid white;margin: 10px;border-radius: 20px;padding: 3px 5px;">
                  <div>
                    <img src="../../public/q2.png" style="width: 20px;float: left">
                  </div>
                  <span style="margin: 0 5px;">0</span>
                  <i class="el-icon-circle-plus"></i>
                </div>
              </el-col>
              <el-col :span="2">
                <i class="el-icon-chat-dot-square" style="font-size: 30px;font-weight: 10;margin-top: 10px"></i>
              </el-col>
              <el-col :span="1">
                <el-popover
                    placement="top-start"
                    width=200
                    trigger="click">
                  <i style="font-size: 30px;position:relative;top:10px"
                     slot="reference" class="el-icon-user"></i>
                  <div style="border-bottom: 2px solid #C0C0C0;padding:3px 0 ">
                    <el-button style="width: 200px;margin: 0;height: 50px; padding: 5px 0;">
                      <el-row :gutter="10" style="height: 50px;">
                        <el-col :span="6">
                          <div style="margin: 5px;">
                            <i style="font-size: 30px;"
                               slot="reference" class="el-icon-user"></i>
                          </div>
                        </el-col>
                        <el-col :span="18">
                          <p style="margin: 5px;font-size: 18px">user124</p>
                          <span style="margin: 5px;">普通用户</span>
                        </el-col>
                      </el-row>
                    </el-button>
                  </div>
                  <div style="border-bottom: 2px solid #C0C0C0;padding:5px 0">
                    <el-button style="width: 200px;margin: 0;height: 40px;">
                      <el-row :gutter="10">
                        <el-col :span="6">
                          <div>
                            <i style="font-size: 20px;"
                               slot="reference" class="el-icon-mobile"></i>
                          </div>
                        </el-col>
                        <el-col :span="18">
                          <p style="margin: 5px;font-size: 14px">订单</p>
                        </el-col>
                      </el-row>
                    </el-button>
                    <el-button style="width: 200px;margin: 0;height: 40px;">
                      <el-row :gutter="10">
                        <el-col :span="6">
                          <div>
                            <i style="font-size: 20px;"
                               slot="reference" class="el-icon-bank-card"></i>
                          </div>
                        </el-col>
                        <el-col :span="18">
                          <p style="margin: 5px;font-size: 14px">钱包</p>
                        </el-col>
                      </el-row>
                    </el-button>
                    <el-button style="width: 200px;margin: 0;height: 40px;">
                      <el-row :gutter="10">
                        <el-col :span="6">
                          <div>
                            <i style="font-size: 20px;"
                               slot="reference" class="el-icon-s-ticket"></i>
                          </div>
                        </el-col>
                        <el-col :span="18">
                          <p style="margin: 5px;font-size: 14px">优惠券</p >
                        </el-col>
                      </el-row>
                    </el-button>
                  </div>
                  <div style="padding:5px 0">
                    <el-button style="width: 200px;margin: 0;height: 40px;" v-for="item in userArr">
                      <el-row :gutter="10">
                        <el-col :span="6">
                          <div>
                            <i style="font-size: 20px;"
                               slot="reference" :class=item.logo></i>
                          </div>
                        </el-col>
                        <el-col :span="18">
                          <p style="margin: 5px;font-size: 14px">{{ item.value }}</p >
                        </el-col>
                      </el-row>
                    </el-button>
                  </div>
                </el-popover>
              </el-col>
            </div>
          </el-row>
        </div>

      </el-header>
      <el-container>
        <el-aside width="200px" style="overflow: hidden">
          <el-menu
              default-active="2"
              @open="handleOpen"
              @close="handleClose">
            <el-menu-item index="1">
              <i class="el-icon-s-home"></i>
              <span slot="title">首页</span>
            </el-menu-item>
            <el-menu-item index="2">
              <i class="el-icon-s-promotion"></i>
              <span slot="title">极速约单</span>
            </el-menu-item>
            <el-menu-item index="3">
              <i class="el-icon-cloudy"></i>
              <span slot="title">动态</span>
            </el-menu-item>
            <br>
            <hr>
            <div style="margin: 10px 20px">
              <span style="font-size: 25px">热门技能</span>
            </div>
            <el-menu-item :index=i v-for="(item,i) in playArr" style=";margin: 15px 0;">
              <img :src="item.imgUrl" style="width: 60px;border-radius: 8px ">
              <span slot="title" style="margin-left: 15px">{{ item.name }}</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<style scoped>
.el-card__body, .el-main {
  padding: 0;
}

.el-container {
  background-color: #f9f9f9;
}


</style>

<script>


export default {
  name: 'HomeView',

  data() {
    return {
      playArr: [{imgUrl: "/imgs/wzry.webp", name: "王者荣耀"},
        {imgUrl: "/imgs/cj.webp", name: "和平精英"},
        {imgUrl: "/imgs/pubg.webp", name: "绝地求生"},
        {imgUrl: "/imgs/pp.webp", name: "跑跑卡丁车"},
        {imgUrl: "/imgs/d5.webp", name: "第五人格"}],
      userArr: [{logo: "el-icon-s-flag", value: "我要做陪玩"},
        {logo: "el-icon-edit", value: "个人资料"},
        {logo: "el-icon-setting", value: "设置"},
        {logo: "el-icon-headset", value: "联系客服"},
        {logo: "el-icon-error", value: "退出登录"},
      ]
    }
  },

}
</script>
